<template>
	<div class="yem">
		<div class="ding">
			<img src="../../img/fh.png" alt="" class='a1' @click="fanhui">
			<img src="../../img/ss.png" alt=""  class='a2'>
			<img src="../../img/fx.png" alt="" class='a3'>
			<div>
				<img src="../../img/yuding01.png" alt=""class="yuding">
			</div>
		</div>
		<div class="jies">
			<h4>悠时咖啡</h4>
			<span>评价 5.0</span>
			<span>月销售3035</span>
			<div>
				<span>¥4 &nbsp;&nbsp;&nbsp;<img src="../../img/yhj.png" alt="">无门栏&nbsp;领取</span>
			</div>
		</div>
		<div class="youhui">
			<span class='b1'>40减20</span>
			<span class='b2'>60减25</span>
			<span class='b3'>5个优惠<img src="" alt=""></span>
			<div>公告：感受一碗粥的小幸福，温馨提示：1、请您确保电话...</div>
		</div>
		
		<ul class='xxk'>
			<li class='c1'>点餐</li>
			<li class='c2'>评价{{msg}}</li>
			<li class='c3'>商家</li>
		</ul>
		<div class="cpdiancs">
			<ul class="fl">
				<li class="f2">热销</li>
				<li class='fl1'>优惠</li>
				<li class='fl1'>商家推荐</li>
				<li class='fl1'>温馨提示</li>
				<li class='fl1'>新品</li>
				<li class='fl1'>咖啡/茶</li>
			</ul>
			<ul class="fi">
				<li style="text-align: left;">
					<img src="../../img/shangp.png" alt="">
					<span>卡布奇诺
					<p>我是优质咖啡+牛奶泡的咖...</p>
					<div class="xiaol">月售331&nbsp;好评率96%</div>
					<span class="dazhe">9.8折</span>
					<span class="xianl">每单限1份优惠</span>
					<br>
					<div class='jinerr11'>¥4.5</div>
					<span class='jinerr12'>¥4</span>
					<span @click="jian" v-show="bur">-</span>
					<span v-show="bur" class="shul">{{shuliang}}</span>
					<span @click='jia'>+</span>
					</span>
					
				</li>
				<li style="text-align: left;">
					<img src="../../img/shangp.png" alt="">
					<span>卡布奇诺
					<p>我是优质咖啡+牛奶泡的咖...</p>
					<div class="xiaol">月售331&nbsp;好评率96%</div>
					<span class="dazhe">9.8折</span>
					<span class="xianl">每单限1份优惠</span>
					<br>
					<div class='jinerr11'>¥4.5</div>
					<span class='jinerr12'>¥4</span>
					<span @click="jian1" v-show="bur1">-</span>
					<span v-show="bur1" class="shul">{{shuliang1}}</span>
					<span @click='jia1'>+</span>
					</span>
					
				</li>
				
			</ul>
		</div>
		
		
		<div class="dibu">
			<div class="dibuyouhui">满减48健5，满88减8，满128减15</div>
			<p style="text-align: left;">
				<img src="../../img/sjjjj.png" alt="">
				<span @click="ljyd">立即预定</span>
			</p>
			
		</div>
		
		
		
		
		
	</div>
</template>

<script>
	   export default{
		   name:'diancan',
		  methods:{
			  fanhui(){
				  this.$router.push('/home')
			  },
			  jia(){
				  this.bur=true;
				  
				  this.shuliang++;
				  
			  },
			  jian(){
				  this.shuliang--;
				  // this.jineer--;
			  },
			  jia1(){
			  				  this.bur1=true;
			  				  
			  				  this.shuliang1++;
			  				  
			  },
			  jian1(){
			  				  this.shuliang1--;
			  				  // this.jineer--;
			  },
			  ljyd(){
				  const mytoken = localStorage.getItem('token')
				  if(mytoken){
					  this.$router.push('/jiesuan')
				  }else{
					  this.$router.push('/login')
				  }
			  }
			  
		  },
		   data() {
		   	return{
				shuliang1:'',
				msg:'999+',
				shuliang:'',
				bur:false,
				bur1:false,
			}
		   },
		   deactivated() {
		   	this.$destroy()
		   }

		   
	   }
</script>

<style scoped lang="less">
	.yem{
		position: relative;
	}
	.ding{
		width: 100%;
		height: 111px;
		background-color: rgba(166, 164, 164, 100);
		position: relative;
		.a1{
			position: absolute;
			top: 2.6%;
			left: 2.6%;
			width: 8%;
		}
		.a2{
			position: absolute;
			top: 2.6%;
			right: 13.3%;
			
		}
		.a3{
			position: absolute;
			top: 2.6%;
			right: 2.6%;
		}
		div{
			position: absolute;
			top: 70%;
			left: 50%;
			transform: translateX(-50%);
			// width:20% ;
			// margin-top: 20%;
		}
	}
	.jies{
		h4{
			margin-top: 60px;
			// margin-left: 50%;
		}
		span{
			color: rgba(166, 164, 164, 100);
			font-size: 12px;
			margin: 8%;
		}
		div{
			width: 50%;
			height: 25px;
			border: 1px solid rgba(253, 229, 121, 100);
			margin-left: 26.6%;
			margin-top: 5%;
			background-color: rgba(253, 229, 121, 100);
			span{
				color: rgba(119, 76, 7, 100);
				font-size: 14px;
			}
			
		}
		
	}
	.youhui{
		// position: absolute;
		margin-top: 5%;
		width: 85%;
		margin-left: 11.6%;
		// display: flex;
		text-align:left;
		// margin-top: 30px;
		.b1{
			width: 13.8%;
			margin: 13.3%;
			border: 1px solid rgba(208, 135, 142, 100);
			font-size: 12px;
			color:rgba(208, 135, 142, 100);
		}
		.b2{
			border: 1px solid rgba(208, 135, 142, 100);
			color:rgba(208, 135, 142, 100);
			font-size: 12px;
		}
		.b3{
			margin-left: 26.6%;
			color: rgba(166, 164, 164, 100);
			font-size: 12px;
		}
		div{
			margin-top: 10px;
			color: rgba(191, 189, 189, 100);
			width: 100%;
			font-size: 12px;
			text-align: center;
			// margin-left: 80px;
		}
	}
	.xxk{
		display: flex;
		margin-left: 22.6%;
		margin-top: 6.3%;
		.c1{
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			height: 6.4%;
			margin-left: -0.8%;
		}
		.c2{
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			height: 6.4%;
			margin-left: 20%;
		}
		.c3{
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			height: 6.4%;
			margin-left: 20%;
		}
	}
	.cpdiancs{
		
		display: flex;
		margin-top: 5.3%;
		.fl{
			height: 282px;
			overflow: scroll;
			width: 50%;
			text-align: left;
			// margin-left: 10px;
			.fl1{
				width: 70%;
				height: 45px;
				line-height: 45px;
				text-align: center;
				border: 1px solid rgba(255, 255, 255, 100);
				background: #F8F8F8 100%;
			}
			.f2{
				width: 70%;
				height: 45px;
				line-height: 45px;
				text-align: center;
				border: 1px solid rgba(255, 255, 255, 100);
				background: #fff;
				border-left: 1px solid red ;
			}
		}
		.fi{
			li{
				// margin: 0 ;
				// padding: 0;
				// text-align: center;
				// display: flex;
				width: 282px;
				height: 123px;
				img{
					// 　vertical-align: text-top;
					vertical-align: text-top;
					width:35.6%;
					// margin-right:205px;
					// vertical-align:center;
					margin-top:-83px ;
				}
				span{
					display: inline-block;
					margin-left: 20px;
					margin-top: 10px;
					p{
						// margin-top: 10px;
						color: rgba(191, 189, 189, 100);
						font-size: 12px;
						text-align: left;
					}
					.xiaol{
						color: rgba(191, 189, 189, 100);
						font-size: 12px;
						text-align: left;
					}
					.dazhe{
						border-radius: 0px 0px 0px 0px;
						background-color: rgba(255, 255, 255, 100);
						color: rgba(208, 135, 142, 100);
						font-size: 12px;
						// text-align: center;
						border: 1px solid rgba(208, 135, 142, 100);
						text-align: left;
					}
					.xianl{
						color: rgba(223, 9, 2, 100);
						font-size: 12px;
						text-align: left;
					}
					.jinerr11{
						color: rgba(223, 9, 2, 100);
						font-size: 15px;
						text-align: left;
						display: inline-block;
					}
					.jinerr12{
						color: rgba(191, 189, 189, 100);
						font-size: 12px;
					}
					.shul{
						font-size: 10px;
					}
				}
				
			}
		}
		
		
	}
	.dibu{
		position: relative;
		.dibuyouhui{
			margin-left: 24px;
			width: 88%;
			height: 50px;
			background: #FFD497;
			text-align: center;
			border-radius: 10px;
		}
		p{
			position: absolute;
			// position: relative;
			top: 18px;
			left: 22px;
			width: 88%;
			height: 50px;
			border-radius: 42px;
			background-color: rgba(58, 46, 47, 100);
			img{
				 vertical-align: middle;
				 margin-top: 8px;
				 margin-left: 20px;
			}
			span{
				position: absolute;
				left: 70.2%;
				display: inline-block;
				margin-bottom: 10px;
				width: 30%;
				height: 100%;
				line-height: 50px;
				background: #FF0000 ;
				text-align: center;
				border-radius:30px;
			}
		}
	}
	
</style>
